<template>
    <nav class="navbar navbar-expand-lg bg-body-tertiary">
        <div class="container">


            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText"
                aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-balloon-heart"
                viewBox="0 0 16 16">
                <path fill-rule="evenodd"
                    d="m8 2.42-.717-.737c-1.13-1.161-3.243-.777-4.01.72-.35.685-.451 1.707.236 3.062C4.16 6.753 5.52 8.32 8 10.042c2.479-1.723 3.839-3.29 4.491-4.577.687-1.355.587-2.377.236-3.061-.767-1.498-2.88-1.882-4.01-.721L8 2.42Zm-.49 8.5c-10.78-7.44-3-13.155.359-10.063.045.041.089.084.132.129.043-.045.087-.088.132-.129 3.36-3.092 11.137 2.624.357 10.063l.235.468a.25.25 0 1 1-.448.224l-.008-.017c.008.11.02.202.037.29.054.27.161.488.419 1.003.288.578.235 1.15.076 1.629-.157.469-.422.867-.588 1.115l-.004.007a.25.25 0 1 1-.416-.278c.168-.252.4-.6.533-1.003.133-.396.163-.824-.049-1.246l-.013-.028c-.24-.48-.38-.758-.448-1.102a3.177 3.177 0 0 1-.052-.45l-.04.08a.25.25 0 1 1-.447-.224l.235-.468ZM6.013 2.06c-.649-.18-1.483.083-1.85.798-.131.258-.245.689-.08 1.335.063.244.414.198.487-.043.21-.697.627-1.447 1.359-1.692.217-.073.304-.337.084-.398Z" />
            </svg>
            <div class="collapse navbar-collapse" id="navbarText">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">

                    <li class="nav-item">
                        <router-link class="nav-link" :to="{ name: 'home' }">首页</router-link>
                    </li>

                    <li class="nav-item">
                        <router-link class="nav-link" :to="{ name: 'myfile' }">我的文件</router-link>
                    </li>

                    <li class="nav-item">
                        <router-link class="nav-link" :to="{ name: 'uploadfile' }">上传文件</router-link>
                    </li>

                    <li class="nav-item">
                        <router-link class="nav-link" :to="{ name: 'downloadfile' }">下载文件</router-link>
                    </li>
                    <!--
                    <li class="nav-item">
                        <router-link class="nav-link" :to="{ name: 'findfile' }">发现</router-link>
                    </li>
                    -->

                </ul>

                <ul class="navbar-nav" v-if="loginValue">
                    <!--<li class="nav-item dropdown">
                        <a class="nav-link" id="navbarDropdown" role="button">{{
                            this.loginValue }}</a>
                    </li>
                    <router-link @click="Logout" class="nav-link" :to="{ name: 'home' }">退出</router-link>
                    -->
                    <div class="container">
                        <div class="dropdown custom-dropdown">
                            <button class="btn dropdown-toggle border-0" type="button" id="dropdownMenuButton"
                                data-bs-toggle="dropdown" aria-expanded="false">
                                {{ this.loginValue }}
                            </button>
                            <ul class="dropdown-menu custom-dropdown-menu bg-lightcyan"
                                aria-labelledby="dropdownMenuButton">
                                <router-link class="dropdown-item text-gray" :to="{ name: 'personal' }">个人中心</router-link>
                                <li><a v-if="isadmin" class="dropdown-item" href="http://10.137.154.193:8080/#/ "
                                        target="_blank">管理界面</a>
                                </li>
                                <router-link @click="Logout" class="dropdown-item text-gray"
                                    :to="{ name: 'home' }">退出登录</router-link>

                            </ul>
                        </div>
                    </div>
                </ul>
                <ul class="navbar-nav" v-else>
                    <li class="nav-item">
                        <router-link class="nav-link" :to="{ name: 'loginandregister' }">注册/登录</router-link>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</template>

<script>
//import { useStore } from 'vuex';

export default {
    name: "NavBar",
    data() {
        return {
            loginValue: false,
            isRouterAlive: true,
            isadmin: false
        };
    },
    watch: {
        '$route': 'getPath'
    },
    methods: {
        getPath() {
            console.log(this.$route.path);
            if (this.$route.path == "/") { //监听路径变化，如果跳转到首页
                this.loginValue = localStorage.getItem('login_user');
                this.isadmin = (localStorage.getItem("purview") == "Super Admin");
            }
        },
        reload() {
            this.isRouterAlive = false; //先关闭，
            this.$nextTick(function () {
                this.isRouterAlive = true; //再打开
            });
        },
        Logout() {
            localStorage.setItem('is_login', "false"); //清空登录状态
            localStorage.setItem('login_user', ""); //清空用户名
            localStorage.setItem('purview', ""); //清空权限
            this.loginValue = !this.loginValue;
        },
        methods: {
            refreshNavBar() {
                this.loginValue = !this.loginValue;
            }
        }
    }
    ,
    created() {
        this.loginValue = localStorage.getItem('login_user');
    },
    computed: {
        isLoggedIn() {
            console.log("调用");
            console.log(localStorage.getItem('is_login'));
            return (localStorage.getItem('is_login') == "true");
        }
    },
    mounted() {
    }
};
</script>

<style scoped>
.navbar {
    background-color: lightcyan;
}

.text-gray {
    color: black;
}

.custom-dropdown {
    background-color: lightcyan;
}

.custom-dropdown .dropdown-toggle {

    color: gray;
}

.custom-dropdown-menu {
    color: gray;
    background-color: lightcyan;
}
</style>